<template>

  <div v-if="deviceInfo.elementIf" style="display: none" ref="deviceInfoHTML">
    <div style="font-size: 12px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">型号:
      {{ deviceInfo.modelName || '-' }}
    </div>
    <div style="font-size: 12px;margin-top: 8px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">存储容量:
      {{ deviceInfo.storage || '-' }}
    </div>
    <div style="font-size: 12px;margin-top: 8px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">机器序列号:
      {{ deviceInfo.serialNumber || '-' }}
    </div>
    <div style="font-size: 12px;margin-top: 8px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden">机器编码:
      {{ deviceInfo.machineCode || '-' }}
    </div>
  </div>

  <!--  设置打印机对话框-->
  <a-modal :visible="printerModal.visible"
           title="打印机设置"
           width="600px" @cancel="hidePrinterModal" @ok="savePointer">
    <div style="margin-bottom: 8px">请先设置打印机后再执行打印操作</div>
    <a-row style="align-items: center">
      <a-col :span="6" style="text-align: right">机器标签打印机：</a-col>
      <a-col :span="18">
        <a-select v-model:value="printerModal.deviceInfoPrinter"
                  :field-names="{label: 'name',value: 'index'}"
                  :options="printerModal.systemPrinter"
                  allowClear placeholder="选择打印机" style="width: 360px">
        </a-select>
      </a-col>
    </a-row>
    <!--    <a-row style="align-items: center;margin-top: 8px">-->
    <!--      <a-col :span="6" style="text-align: right">快递单打印机：</a-col>-->
    <!--      <a-col :span="18">-->
    <!--        <a-select v-model:value="printerModal.expressPrinter"-->
    <!--                  :field-names="{label: 'name',value: 'index'}"-->
    <!--                  :options="printerModal.systemPrinter"-->
    <!--                  allowClear placeholder="选择打印机" style="width: 360px">-->
    <!--        </a-select>-->
    <!--      </a-col>-->
    <!--    </a-row>-->
    <a-row style="align-items: center;margin-top: 8px">
      <a-col :span="6" style="text-align: right">出库单打印机：</a-col>
      <a-col :span="18">
        <a-select v-model:value="printerModal.expressPrinter"
                  :field-names="{label: 'name',value: 'index'}"
                  :options="printerModal.systemPrinter"
                  allowClear placeholder="选择打印机" style="width: 360px">
        </a-select>
      </a-col>
    </a-row>
  </a-modal>

</template>


<script setup>

import {nextTick, onMounted, reactive, ref} from "vue";
import {getLodop} from "/@/views/business/printer/LodopFuncs";
import {message} from "ant-design-vue";
import {inventoryApi} from "/@/views/business/storage/inventory";
import {deliveryOrderApi} from "/@/views/business/storage/delivery-order";

const deviceInfoHTML = ref();
const deviceInfo = reactive({
  elementIf: false,
  modelName: undefined,
  storage: undefined,
  serialNumber: undefined,
  machineCode: undefined,
});
const printerModal = reactive({
  visible: false,
  systemPrinter: null,
  deviceInfoPrinter: null,
  expressPrinter: null,
  stockOutPrinter: null,
});

let LODOP = undefined;

onMounted(() => {

})

// 显示设置打印机对话框
function showPrinterModal() {
  LODOP = getLodop();
  const systemPrinter = [];
  for (let index = 0; index < LODOP.GET_PRINTER_COUNT(); index++) {
    systemPrinter.push({index, name: LODOP.GET_PRINTER_NAME(index)})
  }
  Object.assign(printerModal, {
    visible: true,
    systemPrinter,
    deviceInfoPrinter: JSON.parse(localStorage.getItem('deviceInfoPrinter')),
    expressPrinter: JSON.parse(localStorage.getItem('expressPrinter')),
    stockOutPrinter: JSON.parse(localStorage.getItem('stockOutPrinter')),
  })
}

function hidePrinterModal() {
  Object.assign(printerModal, {
    visible: false,
    systemPrinter: null,
    deviceInfoPrinter: null,
    expressPrinter: null,
    stockOutPrinter: null,
  });
  Object.assign(deviceInfo, {
    elementIf: false,
    modelName: undefined,
    storage: undefined,
    serialNumber: undefined,
    machineCode: undefined,
  });
}

// 保存打印机设置
function savePointer() {
  localStorage.setItem('deviceInfoPrinter', printerModal.deviceInfoPrinter);
  localStorage.setItem('expressPrinter', printerModal.expressPrinter);
  localStorage.setItem('stockOutPrinter', printerModal.stockOutPrinter);

  console.log(printerModal.expressPrinter)
  console.log(JSON.parse(localStorage.getItem('expressPrinter')))
  hidePrinterModal();
}

// 打印设备信息
function printDeviceInfo(data) {
  LODOP = getLodop();
  const index = JSON.parse(localStorage.getItem('deviceInfoPrinter'));
  if (index === null) {
    message.warn('未设置标签打印机，请先设置打印机。')
    return showPrinterModal();
  }
  Object.assign(deviceInfo, data);
  deviceInfo.elementIf = true;
  nextTick(() => {
    console.log(deviceInfo);
    console.log(data);
    LODOP.SET_PRINTER_INDEX(index);
    LODOP.SET_PRINT_PAGESIZE(1, '50mm', '25mm', '打印设备信息');
    console.log(deviceInfoHTML.value.innerHTML)
    LODOP.ADD_PRINT_HTM('1mm', 0, '50mm', '25mm', deviceInfoHTML.value.innerHTML);//然后多个ADD语句及SET语句
    // LODOP.PREVIEW(); //最后一个打印(或预览、维护、设计)语句
    LODOP.PRINT();
  })
}
// 打印物流单
function printExpressInfo(id) {
  LODOP = getLodop();
  const index = JSON.parse(localStorage.getItem('expressPrinter'));
  if (index === null) {
    // message.warn('未设置物流单打印机，请先设置打印机。');
    return showPrinterModal();
  }
  nextTick(() => {
  });
  deliveryOrderApi.getSFInfo(id).then(blob=>{
    console.log(blob)
    blobToBase64(blob.data).then(res => {
      // 转化后的base64
      console.log('base64-----', res)
      LODOP.SET_PRINTER_INDEX(index);
      LODOP.SET_PRINT_PAGESIZE(1, '80mm', '140mm', '打印设备信息');
      LODOP.ADD_PRINT_IMAGE('12mm', '4mm', '72mm', '140mm',res);
      LODOP.SET_PRINT_STYLEA(0,"Stretch",2);
      // LODOP.PREVIEW();
      LODOP.PRINT();
    })
  })
}
function blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

defineExpose({
  printDeviceInfo,
  printExpressInfo,
  showPrinterModal,
});

</script>


<style lang="less" scoped>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  text-align: left;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif !important;
}

.transform {
  transform: scale(0.7);
}

.transform2 {
  transform: scale(0.6);
}

#print {
  width: 100mm;
  overflow-x: hidden;
  overflow-y: auto;
}

.order {
  width: 100mm;
  position: relative;
  /* border: 1px solid #ccc; */
  padding: 2mm 3mm;
  overflow: hidden;
  box-sizing: border-box;
}

.proCode {
  position: absolute;
  top: 1mm;
  right: 3mm;
  font-size: 24pt;
  font-weight: 700;
  font-family: SimSun !important;
}

.barcode-area {
  margin-top: 7mm;
}

.print-info {
  font-size: 6pt;
  transform-origin: left center;
  font-family: SimSun !important;
  display: flex;
  margin-left: 10mm;
  align-items: center;
  line-height: 1;
}

.print-info span {
  margin-right: 14px;
}

.barcode {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3px;
}

.barcode img {
  width: 80mm;
  height: 13mm;
}

.waybillno-info {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  padding: 5px;
  height: 10mm;
}

.flex-center {
  align-items: center;
}

.waybillno-info .count {
  margin-right: 20px;
  margin-left: -12mm;
  font-size: 10pt;
}

.waybillno-info .no {
  font-size: 10pt;
  font-weight: bold;
}

.order-body {
  border: 1px solid #000;
}

.received-area {
  height: 26mm;
  border-bottom: 1px solid #000;
}

.route {
  font-size: 27pt;
  font-weight: 700;
}

.received-area .info {
  display: flex;
  align-items: center;
  position: relative;
}

.received-icon {
  width: 7mm;
  height: 7mm;
  margin-left: 1mm;
}

.receiver-address {
  font-size: 9pt;
  font-family: SimSun !important;
  margin-left: 2mm;
  line-height: 1.5;
}

.destTeam-code {
  position: absolute;
  font-weight: bold;
  color: #909090;
  opacity: 0.7;
  font-size: 37pt;
  line-height: 32pt;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.receiver-address span {
  margin-right: 1mm;
}

.receiver-right {
  margin-left: auto;
}

.receiver-right img {
  width: 17mm;
  height: 9mm;
}

.qrcode-area {
  height: 26mm;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #000;
}

.qrcode-area .left {
  width: 33mm;
  height: 100%;
  border-right: 1px solid #000;
}

.paymethod {
  height: 6mm;
  border-bottom: 1px solid #000;
  font-size: 9pt;
  font-family: SimSun !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.codingMapping {
  height: 20mm;
  font-size: 40pt;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode {
  width: 33mm;
  height: 100%;
  border-right: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode img {
  width: 25mm;
  height: 25mm;
}

.yanshi {
  width: 10mm;
  height: 26mm;
  font-size: 20pt;
  border-right: 1px solid #000;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: SimSun !important;
}

.qrcode-area .right {
  height: 100%;
}

.proName {
  width: 20mm;
  height: 17mm;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #000;
}

.proName div {
  width: 12mm;
  text-align: center;
}

.codingMappingOut {
  height: 9mm;
  font-size: 30pt;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-area {
  height: 11mm;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
}

.send-icon {
  width: 7mm;
  height: 7mm;
  margin-left: 1mm;
}

.send-area .info {
  font-size: 9pt;
  font-family: SimSun !important;
  margin-left: 2mm;
  line-height: 1.5;
}

.cargo-addserviec-area {
  width: 100%;
  overflow: hidden;
  height: 24mm;
  border-bottom: 1px solid #000;
  display: flex;
}

.cargo-addserviec-area .left {
  flex-shrink: 0;
  font-size: 8pt;
  font-family: SimSun !important;
  padding: 1mm;
  width: 47mm;
  border-right: 1px solid #000;
  height: 100%;
}

.cargo {
  line-height: 1.5;
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
}

.remark {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
}

.cargo-addserviec-area .right {
  font-family: SimSun !important;
  line-height: 1.5;
  width: 47mm;
  flex-shrink: 0;
}

.addserviec {
  padding: 1mm;
  height: 13mm;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
}

.addserviec div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
}

.other {
  width: 100%;
  height: 11mm;
}

.other > div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
  line-height: 1.4;
}

.weight {
  display: flex;
}

.weight div {
  margin-right: 10px;
}

.payMethod2 {
  display: flex;
}

.custom-abflag-area {
  height: 22mm;
  display: flex;
}

.custom {
  width: 47mm;
  height: 100%;
  border-right: 1px solid #000;
  flex-shrink: 0;
  padding: 1mm;
}

.custom > div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
  line-height: 1.4;
  font-family: SimSun !important;
}

.shanggua-box {
  line-height: 1;
}

.shanggua {
  font-size: 24pt;
  font-weight: bold;
}

.abflag {
  width: 47mm;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.5mm;
}

.PIimg {
  width: 21mm;
  height: 21mm;
  margin-right: 5px;
}

.stub-body {
  margin-top: 1mm;
  border: 1px solid #000;
}

.logo-barcode-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3mm;
  height: 20mm;
}

.logo-barcode-area .left {
  width: 16mm;
  padding: 1mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-barcode-area .left .logo-icon {
  /* width: 16mm;
  height: 6mm; */
  margin-bottom: 2mm;
}

.logo-barcode-area .center {
  width: 54mm;
  font-size: 10pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-barcode-area .barcode {
  width: 54mm;
  height: 14mm;
}

.logo-barcode-area .right {
  font-size: 14pt;
  font-family: SimSun !important;
  width: 10mm;
  line-height: 1.3;
}

.stub-body .sender-area {
  border-top: 1px solid #000;
  height: 7mm;
  display: flex;
  align-items: center;
}

.sender-area .sender-icon {
  width: 5mm;
  height: 5mm;
  margin-left: 1mm;
  flex-shrink: 0;
}

.stub-body .sender-area .sender-address > div {
  transform-origin: 0 center;
}

.stub-body .sender-area .sender-address {
  line-height: 1.2;
  width: 150%;
  font-size: 6pt;
  margin: 0 1mm;
}

.stub-body .recevier-area {
  border-top: 1px solid #000;
  height: 10mm;
  display: flex;
  align-items: center;
}

.stub-body .recevier-area .receiver-icon {
  width: 5mm;
  height: 5mm;
  margin-left: 1mm;
  flex-shrink: 0;
}

.stub-body .recevier-area .receiver-address > div {
  transform-origin: 0 center;
}

.stub-body .recevier-area .receiver-address {
  line-height: 1.2;
  width: 150%;
  font-size: 6pt;
  margin: 0 1mm;
}

.stub-body .cargo-addservice-area {
  border-top: 1px solid #000;
  height: 12mm;
  display: flex;
}

.stub-body .cargo-addservice-area .left {
  width: 30mm;
  height: 100%;
  border-right: 1px solid #000;
  padding: 1mm;
}

.stub-body .cargo-addservice-area .left > div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
  line-height: 1.3;
}

.stub-body .cargo-addservice-area .right {
  padding: 1mm;
}

.stub-body .cargo-addservice-area .right > div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
  line-height: 1.3;
}

.paymethod-remark-area {
  height: 6mm;
  border-top: 1px solid #000;
  display: flex;
}

.paymethod-remark-area .left {
  width: 30mm;
  height: 100%;
  border-right: 1px solid #000;
  padding: 1mm;
  display: flex;
  align-items: center;
}

.paymethod-remark-area .left > div {
  width: 150%;
  font-size: 6pt;
  transform-origin: 0 center;
  line-height: 1.3;
  display: flex;
  align-items: center;
}

.label {
  flex-shrink: 0;
}

.paymethod-remark-area .right {
  height: 100%;
  padding: 1mm;
}

.paymethod-remark-area .right > div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
  line-height: 1.3;
}

.stub-body .other-area {
  display: flex;
  height: 5mm;
  border-top: 1px solid #000;
}

.other-area-item {
  border-right: 1px solid #000;
  padding: 1mm;
}

.other-area-item:nth-of-type(1) {
  width: 17mm;
}

.other-area-item:nth-of-type(2) {
  width: 22mm;
}

.other-area-item > div {
  width: 150%;
  font-size: 8pt;
  transform-origin: 0 0;
  line-height: 1.3;
}

[v-cloak] {
  //display: none;
}
</style>